<template>
	<view>
		<view class="status_bar"></view>
		<view class="header_created">
			<uni-nav-bar left-icon="back" :border="false" backgroundColor="transparent" @clickLeft="backs">
				<view :class="['title_no',titles==1 ? 'tabselect':'']" @click="imins(1)">我创建的</view>
				<view :class="['title_no',titles==2 ? 'tabselect':'']" @click="imins(2)">我参加的</view>
			</uni-nav-bar>
			<view class="information">
				<view class="information_top">
					<image class="photo" src="../../../static/me/default.png" mode="aspectFill"></image>
					<view class="title">上海起了个大早零售食品有限公司</view>
					<view :class="['subtitle',tags==2 ? 'tselect':'']">2020.12.24 认证 28人</view>
					<view class="capital_details" v-show="created" @click="Returned_Commission(2)">资金明细</view>
				</view>
				<uni-grid :column="2" :showBorder="false">
					<uni-grid-item style="height: 83rpx;float: left;border-right: 1px solid #EEEEEE;">
						<text class="capital">¥823282.12</text>
						<text class="remarks">今日返佣</text>
					</uni-grid-item>
					<uni-grid-item>
						<text class="capital">¥823282.12</text>
						<text class="remarks">今日营收</text>
					</uni-grid-item>
				</uni-grid>
			</view>
		</view>
		<view class="my_commission">
			<view class="commission_title">我的佣金</view>
			<view class="commission_details">
				<uni-grid :column="3" :showBorder="false">
					<uni-grid-item style="height: 108rpx;">
						<text class="commission">¥28394.82</text>
						<text class="Hint">今日获得</text>
					</uni-grid-item>
					<uni-grid-item style="height: 108rpx;">
						<text class="commission">¥58883.21</text>
						<text class="Hint">当月累计</text>
					</uni-grid-item>
					<uni-grid-item style="height: 108rpx;">
						<text class="commission">¥58883.21</text>
						<text class="Hint">迄今累计</text>
					</uni-grid-item>
				</uni-grid>
				<view class="arrow_details">
					<text class="text_details" @click="Returned_Commission(1)">返佣明细</text>
					<uni-icons class="put" type="arrowright" size="10" color="#ffffff"></uni-icons>
				</view>
			</view>
		</view>
		<view class="member">
			<text class="member_title">成员数据</text>
			<text @click="members(1)" :class="['member_no',member==1 ? 'mselect':'']">按成员</text>
			<text @click="members(2)" :class="['member_no',member==2 ? 'mselect':'']">按部门</text>
		</view>
		<view class="classification">
			<text @click="classifications(1)"
				:class="['classification_no',classification==1 ? 'selectActive':'']">佣金返现</text>
			<text @click="classifications(2)"
				:class="['classification_no',classification==2 ? 'selectActive':'']">商品营收</text>
		</view>
		<view class="tab_list">
			<view class="tab_top">
				<uni-grid :column="3" :showBorder="false">
					<uni-grid-item style="height: 79rpx;width: 224rpx;">
						<text class="tab_title">名称</text>
					</uni-grid-item>
					<uni-grid-item style="height: 79rpx;width: 181rpx;">
						<text class="tab_title">今日营收</text>
					</uni-grid-item>
					<uni-grid-item style="height: 79rpx;width: 220rpx;">
						<text class="tab_title">本月营收总计</text>
					</uni-grid-item>
				</uni-grid>
			</view>
			<view class="tab_bottom" @click="member_details">
				<view class="line_list" style="width: 224rpx;">
					<image class="line_photo" src="../../../static/me/default.png" mode="aspectFill"></image>
					<text class="line_text">销售一部</text>
				</view>
				<view class="line_list" style="width: 181rpx;">
					<text class="line_text">¥823282.12</text>
				</view>
				<view class="line_list" style="width: 220rpx;">
					<text class="line_text">¥898232812.12</text>
				</view>
				<uni-icons class="line_icon" type="forward" size="10" color="#C6C5C3"></uni-icons>
			</view>
		</view>
		<view class="bottom_flex">
			<uni-grid v-show="created" :column="3" :showBorder="false" class="flex_bottom" style="width: 750rpx;height: 105rpx;">
				<uni-grid-item class="left_tree" style="width: 79rpx;">
					<image class="tree_img" src="../../../static/me/Recommendation_tree.png" mode=""></image>
					<text class="flex_title">推荐树</text>
				</uni-grid-item>
				<uni-grid-item class="btn_flex">
					<text class="flex_btn">开始聊天</text>
				</uni-grid-item>
				<uni-grid-item class="btn_flex">
					<text class="flex_btn add_btn">新增群聊</text>
				</uni-grid-item>
			</uni-grid>
			<uni-grid v-show="imin" :column="1" :showBorder="false" class="flex_bottom" style="height: 105rpx;">
				<uni-grid-item class="btn_flex" style="width: 699rpx;">
					<text class="imins">开始聊天</text>
				</uni-grid-item>
			</uni-grid>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				member: 1,
				classification: 1,
				imin: false,
				created: true,
				tags: 1,
				titles: 1
			}
		},
		methods: {
			// 按部门按成员点击切换
			members(i) {
				console.log(i)
				this.member = i
			},
			// 佣金返现商品营收点击切换
			classifications(i) {
				this.classification = i
			},
			// 我创建的我参加的点击切换
			imins(i) {
				this.titles = i
				if (i == 2) {
					this.created = false
					this.tags = 2
					this.imin = true
				} else {
					this.imin = false
					this.tags = 1
					this.created = true
				}

			},
			// 返回上一页
			backs() {
				uni.navigateBack({
					delta: 1
				});
			},
			// 返佣明细
			Returned_Commission(i){
				uni.navigateTo({
					url:'Returned_Commission?pages=' + i
				})
			},
			// 成员详情
			member_details(){
				let pagrs;
				if(this.tags == 1 && this.member == 1){
					console.log('我创建的按成员')
					pagrs=1
				}else if(this.tags == 1 && this.member == 2){
					pagrs=2
				 	console.log('我创建的按部门')
				}else if(this.tags == 2 && this.member == 1){
					pagrs=3
					console.log('我参加的按成员')
				}else if(this.tags == 2 && this.member == 2){
					pagrs=2
					console.log('我参加的按部门')
				}
				uni.navigateTo({
					url:'Member_details?pages=' + pagrs
				})
			}
		}
	}
</script>

<style>
	page {
		background: #F5F5F5;
	}

	.status_bar {
		height: var(--status-bar-height);
		background: rgba(252, 218, 34, 1);
	}

	.header_created {
		background-image: url(../../../static/me/bj.png);
		background-size: 100% 355rpx;
		background-repeat:no-repeat;
	}

	.title_no {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #21201D;
		opacity: 0.35;
		margin-left: 61rpx;
	}

	.information {
		width: 699rpx;
		height: 347rpx;
		background: #FFFFFF;
		opacity: 1;
		border-radius: 14rpx;
		margin: 43rpx auto auto auto;
	}

	.tabselect {
		font-size: 32rpx;
		font-weight: 600;
		color: #21201D;
		opacity: 1;
	}

	.information_top {
		width: 648rpx;
		height: 202rpx;
		border-bottom: 1rpx solid #EEEEEE;
		margin: auto;
		margin-bottom: 28rpx;
	}

	.photo {
		width: 141rpx;
		height: 141rpx;
		margin-top: 30rpx;
		margin-right: 25rpx;
		float: left;
	}

	.title {
		width: 460rpx;
		height: 39rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 39rpx;
		color: #21201D;
		opacity: 1;
		margin-top: 32rpx;
		float: left;
	}

	.subtitle {
		width: 460rpx;
		height: 30rpx;
		font-size: 21rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 30rpx;
		color: #21201D;
		opacity: 0.35;
		margin-top: 12rpx;
		float: left;
	}

	.capital_details {
		width: 460rpx;
		height: 30rpx;
		font-size: 21rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 30rpx;
		color: #FCA022;
		opacity: 1;
		margin-top: 28rpx;
		float: left;
	}

	.capital {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 600;
		color: #EB3E3E;
		opacity: 1;
		margin-left: 25rpx;
		margin-bottom: 10rpx;
	}

	.remarks {
		font-size: 21rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #21201D;
		opacity: 0.35;
		margin-left: 25rpx;
	}

	.commission_title {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #21201D;
		opacity: 1;
		margin-left: 25rpx;
		margin-top: 50rpx;
		margin-bottom: 14rpx;
	}

	.commission_details {
		width: 699rpx;
		height: 217rpx;
		background-image: url(../../../static/me/bj_commission.png);
		background-size: cover;
		margin: auto;
	}

	.commission {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		opacity: 1;
		margin-left: 32rpx;
		margin-top: 28rpx;
		margin-bottom: 5rpx;
	}

	.Hint {
		font-size: 21rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		opacity: 1;
		margin-left: 32rpx;
	}

	.arrow_details {
		margin-top: 54rpx;
		height: 36rpx;
		line-height: 36rpx;
	}

	.text_details {
		font-size: 21rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		opacity: 1;
		margin-left: 32rpx;
		display: block;
		float: left;
	}

	.put {
		margin-left: 10rpx;
		float: left;
	}

	.member_title {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #21201D;
		opacity: 1;
		margin-top: 63rpx;
		margin-left: 25rpx;
		display: inline-block;
		margin-right: 331rpx;
	}

	.member_no {
		font-size: 21rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #21201D;
		opacity: 1;
		margin-left: 61rpx;
	}

	.classification {
		margin-top: 36rpx;
		margin-left: 25rpx;
	}

	.classification_no {
		background: #FCFCFC;
		border: 1rpx solid #EEEEEE;
		opacity: 1;
		border-radius: 47rpx;
		font-size: 21rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #21201D;
		padding: 9rpx 25rpx;
		margin-right: 18rpx;
	}

	.selectActive {
		background: #FFDC1D;
	}

	.mselect {
		color: #FCA022;
	}

	.tab_list {
		width: 699rpx;
		background: #FFFFFF;
		margin: auto;
		margin-top: 27rpx;
		border-top-left-radius: 14rpx;
		border-top-right-radius: 14rpx;
	}

	.tab_top {
		width: 659rpx;
		height: 79rpx;
		margin: auto;
		border-bottom: 1rpx solid #EEEEEE;
	}

	.tab_title {
		font-size: 21rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #21201D;
		opacity: 0.65;
		line-height: 79rpx;
		padding-left: 14rpx;
	}

	.tab_bottom {
		width: 659rpx;
		margin: auto;
	}

	.line_photo {
		width: 39rpx;
		height: 39rpx;
		display: inline-table;
		border-radius: 50%;
		margin: 29rpx 0 0 0;
		float: left;
	}

	.tab_content {
		font-size: 21rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #21201D;
		opacity: 1;
	}

	.line_list {
		height: 97rpx;
		float: left;
		display: block;
	}

	.line_text {
		font-size: 21rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 97rpx;
		color: #21201D;
		opacity: 1;
		margin-left: 14rpx;
	}

	.line_icon {
		line-height: 97rpx;
	}

	.tree_img {
		width: 43rpx;
		height: 43rpx;
		margin-left: 18rpx;
		margin-top: 12rpx;
		margin: 18rpx 12rpx 5rpx 18rpx;

	}

	.flex_bottom {
		background: #FFFFFF;
		position: fixed;
		bottom: 0;
	}

	.left_tree {
		width: 79rpx;
		height: 79rpx;
		margin-left: 21rpx;
	}

	.btn_flex {
		margin-left: 25rpx;
		margin-top: 12rpx;
		margin-right: 39rpx;
	}

	.flex_title {
		font-size: 21rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #21201D;
		opacity: 1;
		text-align: center;
	}

	.flex_btn {
		width: 289rpx;
		height: 79rpx;
		background: #FEF8E1;
		opacity: 1;
		border-radius: 39rpx;
		font-size: 25rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 79rpx;
		color: #FE8000;
		text-align: center;
		margin-right: 12rpx;
	}

	.imins {
		width: 699rpx;
		height: 79rpx;
		background: linear-gradient(206deg, #FCCA22 0%, #FFE246 100%);
		border-radius: 39rpx;
		font-size: 25rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 79rpx;
		color: #21201D;
		opacity: 1;
		text-align: center;
	}

	.add_btn {
		background: linear-gradient(206deg, #FCCA22 0%, #FFE246 100%);
		color: #000000;
	}

	.tselect {
		margin-top: 70rpx;
	}
</style>
